<template>
  <div>
    <div class="jumbotron">
      <div>
        <h3>世界会向那些有目标和远见的人让路。</h3>
        <h5>不论你在什么时候开始，重要的是开始之后就不要停止。</h5>
      </div>
    </div>
    <div class="recent">
      <h3>最新文章</h3>
      <el-row class="blogList">
        <el-col v-for="b in blogList" :key="b.blogId" :xs="24" :sm="8" class="blog">
          <h5 @click="getBlog(b.blogId)">{{b.title}}</h5>
          <p>{{b.content.substring(0,100)}}</p>
          <p><a @click="getBlog(b.blogId)">继续阅读</a></p>
          <p class="date">{{b.creationDate.substring(0,11)}}</p>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "HomePage",
  data(){
    return{
      blogList:[]
    }
  },
  methods:{
    loadBlog(){
      this.axios.get('/blog/getRecent').then((res)=>{
        this.blogList = res.data;
      })
    },
    getBlog(id){
      this.$router.push("./blogDetail/" + id);
    }
  },
  created(){
    this.loadBlog();
  }
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
  
}

.jumbotron {
  height: 400px;
  background: url("../../static/image/img.jpg");
  opacity: 0.8;
  color: white;
  position: relative;
}

.jumbotron div{
  position: absolute;
  left: 50%;
  top:50%;
  transform: translate(-50%,-50%);
  width: 85%;
}
.jumbotron div h3{
  font-style: italic;
  font-size: 40px;
  font-weight: lighter;
  margin-bottom: 30px;
  text-align: center;
}
.jumbotron div h5{
  font-size: 20px;
  font-weight: 10;
  text-align: center;
}
/* .jumbotron div h5:hover{
  color: #1279c4;
  cursor: pointer;
} */
.recent{
  font-size: 25px;
  color: #303030;
  margin-bottom: 40px;
}

.recent h3{
  margin: 30px 0px 30px 0px;
  text-align: center;
}

.recent .blogList{
  text-align: left;
  padding: 0px 30px 0px 30px;
}

.recent .blogList h5{
  font-weight: 500;
}

.recent .blogList h5:hover{
  color: #1279c4;
  cursor: pointer;
}

.recent .blogList .blog{
  padding: 0px 20px 0px 20px;
  margin: 10px 0px 10px 0px ;
}


.recent .blogList p{
  font-size: 15px;
  margin: 10px 0px 10px 0px ;
}
.recent .blogList a{
  text-decoration: underline;
  font-size: 15px;
}

.recent .blogList a:hover{
  cursor: pointer;
  color: rgb(117, 109, 109);
}

.recent .date{
  float: left;
  color: rgb(161, 167, 173);
}
</style>
